<template>
	<div>
		<el-form>
			<el-row>
				<el-col :span="12" :offset="6">
					<el-form-item>
						<span>
							<h2>排班管理</h2>
						</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<el-form-item>
						<el-table :data="arrangeClass" ref="singleTable" class="tb-edit" style="width: 100%" highlight-current-row
						 @current-change="handleCurrentChange">
							<el-table-column prop="doctor" label="医生">
								<template scope="scope">
									<el-input size="small" v-model="scope.row.doctor" placeholder="请输入内容"></el-input>
									<span>{{scope.row.doctor}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="monday" label="周一">
								<template scope="scope">
									<el-input size="small" v-model="scope.row.monday" placeholder="请输入内容"></el-input>
									<span>{{scope.row.monday}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="tuesday" label="周二">
								<template scope="scope">
									<el-input size="small" v-model="scope.row.tuesday" placeholder="请输入内容"></el-input>
									<span>{{scope.row.tuesday}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="wednesday" label="周三">
								<template scope="scope">
									<el-input size="small" v-model="scope.row.wednesday" placeholder="请输入内容"></el-input>
									<span>{{scope.row.wednesday}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template scope="scope">
									<el-button size="small" @click="dele(scope.$index, arrangeClass)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row> <br> <br> </el-row>
			<el-row type="flex" justify="space-around">

				<el-col :span="12" :offset="6">
					<el-form-item>
						<el-row type="flex" justify="space-around">
							<el-button>返回</el-button>
							<el-button @click="setCurrent()">确定</el-button>
						</el-row>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<span>.</span>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	export default {
		mounted: function() {
			this.$axios.get('http://localhost:8080/arrangeClass.json').then((result) => {
				this.arrangeClass = result.data; //写法固定
			

			}).catch((err) => {
				console.log(err);
			})
		},
		data() {
			return {
				arrangeClass: [],
				currentRow: null
			}
		},
		methods: {
			setCurrent(row) {
				this.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(val) {
				this.currentRow = val;
			},
			dele(index,arrangeClass){
				alert("删除成功！");
				arrangeClass.splice(index, 1);
			}
		}
	}
</script>

<style>
	.tb-edit .el-input {
		display: none
	}

	.tb-edit .current-row .el-input {
		display: block
	}

	.tb-edit .current-row .el-input+span {
		display: none
	}
</style>
